var input=document.querySelector('input');
var first=document.querySelector('.first');
var btn=document.querySelector('#btn');
var leftul=document.querySelector('.leftul');
var xiaoli=document.querySelector('.xiaoli');
var yesimg=document.querySelector('#yesimg');
var noimg=document.querySelector('#noimg');
var kongbai=document.querySelector('.kongbai');
var youbian=document.querySelector('.youbian');


var zx=yes.innerText=0;
var za=no.innerText=0;
input.onfocus=function(){
    this.style.color='#333';
    first.style.backgroundColor='white';
    first.style.boxShadow='none';
    
}
input.onblur=function(){
    this.style.color='rgba(128, 128, 128, 0.527)';
    first.style.color='#fefefe98';
    first.style.boxShadow='13px 15px 16px #99999957 inset';
}
//  添加事件
btn.onclick=function(){
   if(input.value==""){
       alert('不要捣蛋(请输入内容)');
       return;
   }else{
    //    创建元素li
    var li=document.createElement('li');
    // 将input中的value赋给li
    li.innerHTML='<div id="pangbian"></div>'+'<span id="juxing">'+input.value+'</span>'+"<a href='javascript:;' id='zuihou'>x</a>";
   }
    //    添加元素
   leftul.appendChild(li);
   huantu();
   input.value="";//input内容为空
   var zx1=yes.innerText++;

//    删除事件
   var as=leftul.querySelectorAll('a');
        for(var i=0;i<as.length;i++){
           as[i].onclick=function(){
               if(confirm("您确定要删除嘛？")){
                leftul.removeChild(this.parentNode);
                var zx2=yes.innerText--;
                huantu();
               }
          }
       }
//复制节点    
// 点击圆圈到复制到右边
  var pangbian=leftul.querySelectorAll('#pangbian');
  var youbian=document.querySelector('.youbian');
  for(var a=0;a<pangbian.length;a++){
        pangbian[a].onclick=function(){
            var lili=this.parentNode.cloneNode(true);

            youbian.appendChild(lili);
            var za1=no.innerText++;
            leftul.removeChild(this.parentNode);
            var zx3=yes.innerText--;
            huantu();
     var as=youbian.querySelectorAll('a');
        for(var b=0;b<as.length;b++){
           as[b].onclick=function(){
               if(confirm("您确定要删除嘛？")){
                youbian.removeChild(this.parentNode);
                var za2=no.innerText--;
                huantu();
              }
           }
         }
     var circle=youbian.querySelectorAll('#pangbian') ;
       for(var b=0;b<circle.length;b++){
         circle[b].onclick=function(){
             var lilili=this.parentNode.cloneNode(true);
             leftul.appendChild(lilili);
             youbian.removeChild(this.parentNode);
             var zx4=yes.innerText++;
             var za3=no.innerText--;
             huantu();
            }
          }
        
     var asas=leftul.querySelectorAll('a');
        for(var c=0;c<asas.length;c++){
           asas[c].onclick=function(){
               if(confirm("您确定要删除嘛？")){
                leftul.removeChild(this.parentNode);
                var za4=no.innerText--;
                huantu();
                 }
               }
            } 
         }
      }
    }
// 修改图片
var huantu=function(){
   if((leftul.childElementCount-1)!=0){
      yesimg.style.display='none';
   }else{
      yesimg.style.display='block';
   }
   if((youbian.childElementCount-1)!=0){
      noimg.style.display='none';
   }else{
      noimg.style.display='block';
   }
}


